Summary

Module based

Source: https://github.com/ganatan/angular-react-lazy-loading

1.Main routing

1. create modules

                      ng g m pages/dashboard--routing
                      ng g m pages/orders --routing
                      ng g m pages/products --routing
                      ng g m pages/transactions --routing
                      ng g m pages/settings --routing

                      

2. import modules

src/app/app-routes.ts

                      import { Routes } from '@angular/router';

                      import { DashboardComponent } from './pages/dashboard/dashboard.component';
                      import { NotFoundComponent } from './pages/not-found/not-found.component';

                      export const routes: Routes = [
                        { path: '', component: DashboardComponent, },

                        {
                          path: 'orders',
                          loadChildren: () => import('./pages/orders/orders.module')
                            .then(mod => mod.OrdersModule)
                        },
                        {
                          path: 'products',
                          loadChildren: () => import('./pages/products/products.module')
                            .then(mod => mod.ProductsModule)
                        },
                        {
                          path: 'transactions',
                          loadChildren: () => import('./pages/transactions/transactions.module')
                            .then(mod => mod.TransactionsModule)
                        },

                        {
                          path: 'settings',
                          loadComponent: () => import('./pages/settings/settings.component')
                            .then(mod => mod.SettingsComponent)
                        },

                        { path: '**', component: NotFoundComponent }
                      ];

                      

3. configure module file

src/app/pages/products/products.module.ts

                      import { NgModule } from '@angular/core';
                      import { CommonModule } from '@angular/common';

                      import { ProductsComponent } from './products.component';
                      import { ProductsRoutingModule } from './products-routing.module';

                      @NgModule({
                        imports: [
                          CommonModule,
                          ProductsRoutingModule
                        ],
                        exports: [
                          ProductsComponent
                        ],
                        declarations: [
                          ProductsComponent
                        ],
                        providers: [
                        ],
                      })
                      export class ProductsModule { }

                      

4. configure routing.module.ts file

products-routing.module.ts

                      import { NgModule } from '@angular/core';
                      import { Routes, RouterModule } from '@angular/router';

                      import { ProductsComponent } from './products.component';

                      const routes: Routes = [
                        { path: '', component: ProductsComponent },
                      ];

                      @NgModule({
                        imports: [RouterModule.forChild(routes)],
                        exports: [RouterModule]
                      })
                      export class ProductsRoutingModule { }

                      

5. products component

products.component.ts

                      import { Component } from '@angular/core';

                      @Component({
                        selector: 'app-products',
                        templateUrl: './products.component.html',
                        styleUrl: './products.component.css'
                      })
                      export class ProductsComponent {

                      }
                      

6. products.component.html

                      <div>
                        <p>product page works!</p>
                      </div>

                    

3. child route

1. add sub modules

                      ng g m pages/products/allProducts --routing  --module=app
                      ng g m pages/products/activeProducts --routing  --module=app
                      ng g m pages/products/reviewProducts --routing  --module=app
                      ng g m pages/products/soldProducts --routing  --module=app
                    

2. modify product main module route

src/app/pages/products/products.module.ts

                      import { NgModule } from '@angular/core';
                      import { Routes, RouterModule } from '@angular/router';

                      import { ProductsComponent } from './products.component';

                      const routes: Routes = [
                        {
                          path: '', component: ProductsComponent, children: [


                                  {
                                    path: '',
                                    loadChildren: () => import(`./allProducts/allProducts.module`)
                                      .then(mod => mod.AllProductsModule)
                                  },

                                  {
                                    path: 'active',
                                    loadChildren: () => import(`./activeProducts/activeProducts.module`)
                                      .then(mod => mod.ActiveProductsModule)
                                  },
                                  {
                                    path: 'review',
                                    loadChildren: () => import(`./reviewProducts/reviewProducts.module`)
                                      .then(mod => mod.ReviewProductsModule)
                                  },
                                  {
                                    path: 'sold',
                                    loadChildren: () => import(`./soldProducts/soldProducts.module`)
                                      .then(mod => mod.SoldProductsModule)
                                  },

                          

                          ]
                        },
                      ];

                      @NgModule({
                        imports: [RouterModule.forChild(routes)],
                        exports: [RouterModule]
                      })
                      export class ContactRoutingModule { }

                      

3. product sub module

products/allProducts/allProducts.module.ts

                      import { NgModule } from '@angular/core';
                      import { CommonModule } from '@angular/common';

                      import { AllProductsRoutingModule } from './allProducts-routing.module';


                      @NgModule({
                        declarations: [],
                        imports: [
                          CommonModule,
                          AllProductsRoutingModule
                        ]
                      })
                      export class AllProductsModule { }

                      

4. submodule routes

src/app/pages/products/allProducts/allProducts-routing.module.ts

                      import { NgModule } from '@angular/core';
                      import { Routes, RouterModule } from '@angular/router';
                      import { AllProductsComponent } from './allProducts.component';

                      const routes: Routes = [
                        { path: '', component: AllProductsComponent, children: [] }
                      ];

                      @NgModule({
                        imports: [RouterModule.forChild(routes)],
                        exports: [RouterModule]
                      })
                      export class AllProductsRoutingModule { }

                      

src/app/pages/products/allProducts/activeProducts-routing.module.ts

                      import { NgModule } from '@angular/core';
                      import { Routes, RouterModule } from '@angular/router';
                      import { ActiveProductsComponent } from './activeProducts.component';

                      const routes: Routes = [
                        { path: '', component: ActiveProductsComponent, children: [] }
                      ];

                      @NgModule({
                        imports: [RouterModule.forChild(routes)],
                        exports: [RouterModule]
                      })
                      export class ActiveProductsRoutingModule { }

                      

5. sub component

products/allProducts/allProducts.component.ts

                      import { Component } from '@angular/core';

                      @Component({
                        selector: 'app-allProducts',
                        standalone: true,
                        imports: [],
                        templateUrl: './allProducts.component.html',
                        styleUrl: './allProducts.component.css'
                      })
                      export class AllProductsComponent {

                      }
                      

6. sub component html

products/allProducts/allProducts.component.html

                      <p>mailing works!</p>
                      

7. modify parent component html

products.component.html

                      <div>
                      <p>Product page works!</p>
                      <ul>
                        <li><a routerLink="/products/allProducts">All Products</a></li>
                        <li><a routerLink="/products/activeProducts">Active Products</a></li>
                        <li><a routerLink="/products/reviewProducts">Review Products</a></li>
                      </ul>
                      <h4>Child Routes Result</h4>
                      <router-outlet></router-outlet>
                    </div>